<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>消息发送</span>
      </div>
      <div class="msg-box">
        <el-form
          :model="msgForm"
          :rules="rules"
          ref="msgForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="消息标题" prop="title">
            <el-input
              maxlength="15"
              show-word-limit
              v-model="msgForm.title"
              class="msg-title"
            ></el-input>
          </el-form-item>
          <el-form-item label="接收对象" class="groups" prop="group_index">
            <el-select
              v-model="msgForm.group_index"
              placeholder="请选择"
              @change="onChange"
            >
              <el-option label="用户组" value="0"></el-option>
              <el-option label="管理组" value="1"></el-option>
              <el-option label="全体用户" value="2"></el-option>
              <el-option label="单用户" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="is_single"
            label="用户id"
            class="rec_id"
            prop="rec_id"
          >
            <el-input v-model="msgForm.rec_id"></el-input>
          </el-form-item>
          <el-form-item label="消息内容" prop="content">
            <el-input
              maxlength="200"
              type="textarea"
              rows="4"
              show-word-limit
              v-model="msgForm.content"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('msgForm')"
              >发送</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      msgForm: {
        //   消息标题
        title: "",
        // 消息接受组
        group: "",
        // 选择的消息组的索引
        group_index: "",
        // 消息内容
        content: "",
        // 单个的消息接收人的id
        rec_id: "",
      },
      // 是否是发送给单用户
      is_single: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        group_index: [
          { required: true, message: "请选择接收对象", trigger: "change" },
        ],
        rec_id: [{ required: true, message: "请输入用户id", trigger: "blur" }],
        content: [
          {
            min: 6,
            required: true,
            message: "最少输入6个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions({ msgSend: "message/msgSend" }),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.msgSend(this.msgForm).then((res) => {
            this.$message({
              message: "消息发送成功",
              type: "success",
            });
            this.resetForm(formName)
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  接收组选择器发生变化的回调
    onChange(index) {
      if (index == 3) {
        this.is_single = true;
        this.msgForm.group = "";
      } else {
        this.is_single = false;
        this.msgForm.rec_id = "";
        this.msgForm.group = index;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .card-title {
    font-size: 22px;
  }
  .msg-title {
    width: 350px;
  }
  .groups {
    width: 220px;
  }
  .rec_id {
    width: 220px;
  }
}
</style>